<template>
  <div>
    <ul class="mui-table-view">
      <li
        class="mui-table-view-cell mui-media"
        v-for="item in newslist"
        :key="item.id"
      >
        <router-link
          :to="{
            name: 'news_content',
            params: {
              id: item.id,
            },
          }"
        >
          <img class="mui-media-object mui-pull-left" :src="getRandomImg()" />
          <div class="mui-media-body">
            {{ item.title }}
            <p class="mui-ellipsis">
              {{ item.body }}
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "NewsList",
  data() {
    return {
      newslist: [],
      imgs: [
        "../../static/imgs/cbd.jpg",
        "../../static/imgs/muwu.jpg",
        "../../static/imgs/shuijiao.jpg",
        "../../static/imgs/yuantiao.jpg",
      ],
    };
  },
  mounted() {
    this.getNewsList();
  },
  methods: {
    getNewsList() {
      this.axios.get("api/posts").then(
        (res) => {
          this.newslist = this.newslist.concat(res.data);
        },
        (err) => {
          Toast(err.message);
        }
      );
    },
    getRandomImg() {
      let index = Math.floor(Math.random() * this.imgs.length);
      return this.imgs[index];
    },
  },
};
</script>

<style lang="less" scoped>
</style>